<script type="text/x-template" id="mediaitem-square">
  <div tabindex="0" class="cd-mediaitem-square-container"
       @click.self="app.routeView(item)"
       @controller-click="app.routeView(item)"
       @contextmenu.self="getContextMenu"
       v-observe-visibility="{callback: visibilityChanged}"
  >
      <div v-if="reasonShown" class="reasonSP ">{{item?.meta?.reason?.stringForDisplay ?? ''}}</div>
      <div style="{'--spcolor': getBgColor()}"
           class="cd-mediaitem-square" :class="getClasses()" @contextmenu="getContextMenu">
              <div class="artwork-container" v-show="isVisible">
                  <div class="unavailable-overlay" v-if="unavailable">
                      <div class="codicon codicon-circle-slash"></div>
                  </div>
                  <div class="artwork" @click='app.routeView(item)'>
                      <mediaitem-artwork
                              :url="getArtworkUrl()"
                              :video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
                              :size="size"
              :upscaling="true"
                              shadow="subtle"
                              :bgcolor="getBgColor()"
                              :video-priority="forceVideo"
                              :type="item.type"></mediaitem-artwork>
                  </div>
                  <button class="menu-btn" v-if="!nomenu.includes(item.type)"
                          @click="getContextMenu" :aria-label="$root.getLz('term.more')">
                      <%- include("../svg/more.svg") %>
                  </button>
                  <button class="play-btn" v-if="!noplay.includes(item.type)"
                          @click="app.playMediaItem(item)" :aria-label="$root.getLz('term.play')">
                      <%- include("../svg/play.svg") %>
                  </button>
                  <div class="badge-container" v-if="itemBadges.length != 0">
                      <div class="socialBadge" v-for="badge in itemBadges.limit(1)" v-bind:key="badge.id">
                          <mediaitem-artwork
                                  :url="(badge.attributes.artwork ? badge.attributes.artwork.url : '')"
                                  :size="32"></mediaitem-artwork>
                      </div>
                  </div>
              </div>
              <div class="info-rect" :class="{'info-rect-card': kind == 'card'}"
        v-show="isVisible"
                   :style="{'--bgartwork': getArtworkUrl(size, true)}">
                  <div class="title"
                       :title="item.attributes?.name ?? (item.relationships?.contents?.data[0]?.attributes?.name ?? (item.attributes?.editorialNotes?.name ?? ''))"
                       v-if="item.attributes.artistNames == null || kind != 'card'" @click='app.routeView(item)'>
                      <div class="item-navigate text-overflow-elipsis">{{ (item.attributes?.editorialElementKind == "394" && item.relationships?.contents?.data[0]?.attributes?.shortName != null ) ? item.relationships?.contents?.data[0]?.attributes?.shortName : (item.attributes?.name ? ((removeamtext ) ? item.attributes?.name.replace(/&nbsp;/g, ' ').replace(/Apple Music |^Apple |/g, '') : item.attributes?.name.replace(/&nbsp;/g, ' ')) :
                          (item.relationships?.contents?.data[0]?.attributes?.name ??
                          (item.attributes?.editorialNotes?.name ?? ''))) }}
                      </div>
                      <div class="explicit-icon" v-if="item.attributes && item.attributes.contentRating == 'explicit'"
                           style="background-image: url(./assets/explicit.svg);height: 12px;width: 12px;filter: contrast(0);background-repeat: no-repeat;margin-top: 2.63px;margin-left: 4px;"></div>
                  </div>
                  <div :title="getSubtitle()" class="subtitle item-navigate text-overflow-elipsis"
                       @click="getSubtitleNavigation()"
                       v-if="getSubtitle() != ''">
                      {{ getSubtitle() }}
                  </div>
                  <div class="subtitle" v-if="getSubtitle() == '' && kind != 'card'">&nbsp;</div>
              </div>
      </div>
  </div>
</script>

<script>
Vue.component('mediaitem-square', {
  template: '#mediaitem-square',
  props: {
    item: {
      type: Object,
      required: true
    },
    kind: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: '190'
    },
    forceVideo: {
      type: Boolean,
      default: false
    },
    reasonShown: {
      type: Boolean,
      default: false,
      required: false
    },
          noScale: {
              type: Boolean,
              default: false,
              required: false
          },
    imageformat: {
              type: String,
              default: 'cc',
              required: false
          },
    removeamtext: {
              type: Boolean,
              default: false,
              required: false
    },
    'contextExt': { type: Object, required: false },
  },
  data: function () {
    return {
      isVisible: false,
      addedToLibrary: false,
      guid: this.uuidv4(),
      noplay: ["apple-curators", "editorial-elements", "editorial-items"],
      nomenu: ["stations", "apple-curators", "editorial-elements", "editorial-items"],
      app: this.$root,
      badges: this.$root.socialBadges.badgeMap,
      itemBadges: [],
      unavailable: false
    }
  },
  async mounted() {
    await this.getBadges()
    if (typeof this.item.attributes.playParams == "object") {
      if (this.item.attributes.playParams.kind.includes("radioStation") && (this.item.attributes.playParams.streamingKind == 1)) {
        this.unavailable = true
      }
    } else {
      if (this.item.type == "music-movies" || this.item.type == "tv-episodes") {
        this.unavailable = true
      }
    }
  },
  methods: {
    getBgColor() {
      return `#${(this.item.attributes.artwork != null && this.item.attributes.artwork.bgColor != null) ? (this.item.attributes.artwork.bgColor) : ``}`
    },
    getContextMenu(event) {
      if (this.item.type === "artists") {
        return this.artistMenu(event)
      } else {
        return this.contextMenu(event)
      }
    },
    getSubtitle() {
      if (this.kind == "card") {
        if (typeof this.item.attributes.artistNames != "undefined") {
          return this.item.attributes.artistNames
        } else if (typeof this.item.attributes.editorialNotes != "undefined") {
          return this.item?.attributes?.editorialNotes?.short ?? (this.item.attributes?.editorialNotes?.name ?? '')
        } else if (typeof this.item.attributes.artistName != "undefined") {
          return this.item.attributes.artistName
        } else {
          return ''
        }
      } else {
        if (typeof this.item.attributes.artistName != "undefined") {
          return this.item.attributes.artistName
        } else if (typeof this.item.attributes.artist != "undefined") {
          return this.item.attributes.artist.attributes.name
        } else if (typeof this.item.attributes.curatorName != "undefined") {
          return this.item.attributes.curatorName
        } else {
          return ''
        }
      }
    },
    getSubtitleNavigation() {
      if (this.kind === 'card' || this.item.type === "playlists") {
        try {
          if (typeof this.item.attributes.artistName != "undefined") {
            return app.searchAndNavigate(this.item, 'artist')
          } else {
            return app.routeView(this.item)
          }
        } catch (e) {
          return app.routeView(this.item)
        }
      } else {
        if (typeof this.item.attributes.artistName != "undefined") {
          return app.searchAndNavigate(this.item, 'artist')
        } else {
          return app.routeView(this.item)
        }
      }
    },
    async getBadges() {
      const self = this
      const id = ((this.item.attributes?.playParams ?? false) ? this.item.attributes?.playParams.id : null) || this.item.id
      if (id && this.badges[id]) {
        let friends = this.badges[id]
        if (friends) {
          friends.forEach(function (friend) {
            self.app.mk.api.v3.music(`/v1/social/${app.mk.storefrontId}/social-profiles/${friend}`).then(data => {
              self.itemBadges.push(data.data.data[0])
            })
          })
        }
      }
    },
    revisedRandId() {
      return Math.random().toString(36).replace(/[^a-z]+/g, '').slice(2, 10);
    },
    async isInLibrary() {
      if (this.item.type && !this.item.type.includes("library")) {
        let params = {
          relate: "library",
          "fields": "inLibrary",
          "extend": this.revisedRandId()
        }
        let kind = this.item.type ?? this.item.attributes.playParams.kind
        let truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
        if (truekind === "musicVideos") {
          truekind = "music-videos"
        }
        let res = await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/?ids[${truekind}]=${this.item.attributes.playParams.id ?? this.item.id}`, params);
        res = res.data.data[0]
        this.addedToLibrary = (res && res.attributes && res.attributes.inLibrary) ? res.attributes.inLibrary : false
      } else {
        this.addedToLibrary = true
      }
    },
    async removeFromLibrary(id) {
      let params = {
        relate: "library",
        "fields": "inLibrary",
        "extend": this.revisedRandId()
      }
      let kind = this.item.type ?? this.item.attributes.playParams.kind
      let truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
      if (truekind == "musicVideos") {
        truekind = "music-videos"
      }
      let res = await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/?ids[${truekind}]=${this.item.attributes.playParams.id ?? this.item.id}`, params);
      res = res.data.data[0]
      if (res && res.relationships && res.relationships.library && res.relationships.library.data && res.relationships.library.data.length > 0) {
        id = res.relationships.library.data[0].id
      }

      app.mk.api.v3.music(`v1/me/library/${truekind}/${id.toString()}`, {},
        {
          fetchOptions: {
            method: "DELETE"
          }
        })
      this.addedToLibrary = true
    },
    uuidv4() {
      return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
        (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
      );
    },
    getArtworkUrl(size = -1, includeUrl = false) {
      let artwork = this.item?.attributes?.artwork ? this.item?.attributes?.artwork?.url : (this.item?.attributes?.editorialArtwork?.subscriptionCover?.url ?? '')
      if (size != -1) {
        artwork = artwork.replace('{w}', size).replace('{h}', size).replace('{f}', "webp").replace('{c}', (size === 900 || size === 380 || size === 600 ) ? "sr" : this.imageformat);
      }
      switch (this.kind) {
        case "385":
          artwork = (this.item.attributes.editorialArtwork?.subscriptionHero?.url ?? (this.item.attributes.artwork?.url ?? (this.item.relationships?.contents?.data[0]?.attributes?.editorialArtwork?.subscriptionHero?.url ?? ''))).replace('{c}', (size === 900 || size === 380 || size === 600 ) ? "sr" : this.imageformat);
          break;
      }
      if (!includeUrl) {
        return artwork
      } else {
        return `url("${artwork}")`
      }
    },
    getClasses() {
      let type = []
              let classes = []
              if(this.noScale) {
                  classes.push("noscale")
              }
      try {
        type = this.item.type

      } catch (e) {
        console.log('sd', this.item)
      }

      if (this.kind !== "") {
        type = this.kind
      }
      switch (type) {
        default:

          break;
        case "editorial-elements":
        case "card":
          classes.push("mediaitem-card")
          break;
        case "385": // editorial
                      classes.push("mediaitem-brick")
          break;
        case "small":
          classes.push("mediaitem-small")
          break;
        case "music-videos":
        case "uploadedVideo":
        case "uploaded-videos":
        case "library-music-videos":
          classes.push("mediaitem-video")
          break;
      }
              return classes
    },
    visibilityChanged: function (isVisible, entry) {
      this.isVisible = isVisible
    },
    async contextMenu(event) {
      if (this.nomenu.includes(this.item.type)) {
        return
      }
      if (!event) {
        event = this.$refs.main
      } else {
        console.log(event)
      }
      let self = this
      let useMenu = "normal"
      if (app.selectedMediaItems.length <= 1) {
        app.selectedMediaItems = []
        app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid, this.item.attributes.playParams.isLibrary ?? false)
      } else {
        useMenu = "multiple"
      }
      let menus = {
        multiple: {
          items: [
            {
              name: app.getLz('action.playTracksNext').replace("${app.selectedMediaItems.length}", app.selectedMediaItems.length),
              "icon": "./assets/arrow-bend-up.svg",
              action: () => {
                let itemsToPlay = {}
                app.selectedMediaItems.forEach(item => {
                  if (!itemsToPlay[item.kind]) {
                    itemsToPlay[item.kind] = []
                  }
                  itemsToPlay[item.kind].push(item.id)
                })
                // loop through itemsToPlay
                for (let kind in itemsToPlay) {
                  let ids = itemsToPlay[kind]
                  if (ids.length > 0) {
                    app.mk.playNext({ [kind + "s"]: itemsToPlay[kind] })
                  }
                }
                console.log(itemsToPlay)
                app.selectedMediaItems = []
              }
            },
            {
              name: app.getLz('action.playTracksLater').replace("${app.selectedMediaItems.length}", app.selectedMediaItems.length),
              "icon": "./assets/arrow-bend-down.svg",
              action: () => {
                let itemsToPlay = {}
                app.selectedMediaItems.forEach(item => {
                  if (!itemsToPlay[item.kind]) {
                    itemsToPlay[item.kind] = []
                  }
                  itemsToPlay[item.kind].push(item.id)
                })
                // loop through itemsToPlay
                for (let kind in itemsToPlay) {
                  let ids = itemsToPlay[kind]
                  if (ids.length > 0) {
                    app.mk.playLater({ [kind + "s"]: itemsToPlay[kind] })
                  }
                }
                app.selectedMediaItems = []
              }
            },
          ]
        },
        normal: {
          headerItems: [
            {
              "icon": "./assets/feather/heart.svg",
              "id": "love",
              "name": app.getLz('action.love'),
              "hidden": false,
              "disabled": true,
              "action": function () {
                app.love(self.item)
              }
            },
            {
              "icon": "./assets/feather/heart.svg",
              "id": "unlove",
              "active": true,
              "name": app.getLz('action.unlove'),
              "hidden": true,
              "action": function () {
                app.unlove(self.item)
              }
            },
            {
              "icon": "./assets/feather/thumbs-down.svg",
              "id": "dislike",
              "name": app.getLz('action.dislike'),
              "hidden": false,
              "disabled": true,
              "action": function () {
                app.dislike(self.item)
              }
            },
            {
              "icon": "./assets/feather/thumbs-down.svg",
              "id": "undo_dislike",
              "name": app.getLz('action.undoDislike'),
              "active": true,
              "hidden": true,
              "action": function () {
                app.unlove(self.item)
              }
            },
          ],
          items: [
            {
              "icon": "./assets/feather/list.svg",
              "id": "addToPlaylist",
              "name": app.getLz('action.addToPlaylist'),
              "action": function () {
                app.promptAddToPlaylist()
              }
            },
            {
              "id": "addToLibrary",
              "icon": "./assets/feather/plus.svg",
              "name": app.getLz('action.addToLibrary'),
              "hidden": false,
              "disabled": true,
              "action": function () {
                let item_id = self.item.attributes.playParams.id ?? self.item.id;
                let data_type = self.item.attributes.playParams.kind ?? self.item.type;
                app.addToLibrary(item_id);
                self.addedToLibrary = true;
              }
            },
            {
              "id": "removeFromLibrary",
              "icon": "./assets/feather/x-circle.svg",
              "name": app.getLz('action.removeFromLibrary'),
              "hidden": true,
              "action": async function () {
                console.log("remove");
                let item_id = self.item.attributes.playParams.id ?? self.item.id;
                let data_type = self.item.attributes.playParams.kind ?? self.item.type;
                await self.removeFromLibrary(item_id);
                self.addedToLibrary = false
              }
            },
            {
              "name": app.getLz('action.playNext'),
              "icon": "./assets/arrow-bend-up.svg",
              "action": function () {
                app.mk.playNext({ [self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id })
                app.mk.queue._reindex()
                app.selectedMediaItems = []
              }
            },
            {
              "name": app.getLz('action.playLater'),
              "icon": "./assets/arrow-bend-down.svg",
              "action": function () {
                app.mk.playLater({ [self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id })
                app.mk.queue._reindex()
                app.selectedMediaItems = []
              }
            },
            {
              "icon": "./assets/feather/share.svg",
              "name": app.getLz('action.share'),
              "action": function () {
                if (!self.item.attributes.url && self.item.relationships) {
                  if (self.item.relationships.catalog) {
                    app.mkapi(self.item.attributes.playParams.kind, false, self.item.relationships.catalog.data[0].id).then(u => {
                      self.app.copyToClipboard((u.data.data.length && u.data.data.length > 0) ? u.data.data[0].attributes.url : u.data.data.attributes.url)
                    })
                  }
                } else {
                  self.app.copyToClipboard(self.item.attributes.url)
                }
              }
            },
            {
              "icon": "./assets/feather/share.svg",
              "name": `${app.getLz('action.share')} (song.link)`,
              "action": function () {
                if (!self.item.attributes.url && self.item.relationships) {
                  if (self.item.relationships.catalog) {
                    app.mkapi(self.item.attributes.playParams.kind, false, self.item.relationships.catalog.data[0].id).then(u => {
                      self.app.songLinkShare((u.data.data.length && u.data.data.length > 0) ? u.data.data[0].attributes.url : u.data.data.attributes.url)
                    })
                  }
                } else {
                  self.app.songLinkShare(self.item.attributes.url)
                }
              }
            }
          ]
        }
      }
      if ((self.item.attributes.playParams.kind ?? self.item.type).includes("playlist")) {
        // remove the add to playlist option by id "addToPlaylist" using the .filter() method
        menus.normal.items = menus.normal.items.filter(function (item) {
          return item.id != "addToPlaylist"
        })
      }
      app.showMenuPanel(menus[useMenu], event)

      try {
        await this.isInLibrary().then((_) => {
          if (self.addedToLibrary) {
            menus.normal.items.find(x => x.id == 'addToLibrary').hidden = true
            menus.normal.items.find(x => x.id == 'removeFromLibrary').hidden = false
          } else {
            menus.normal.items.find(x => x.id == 'addToLibrary').disabled = false
          }
        })

      } catch (e) {

      }
      try {
        let rating = await app.getRating(self.item)
        if (rating == 0) {
          menus.normal.headerItems.find(x => x.id == 'love').disabled = false
          menus.normal.headerItems.find(x => x.id == 'dislike').disabled = false
        } else if (rating == 1) {
          menus.normal.headerItems.find(x => x.id == 'unlove').hidden = false
          menus.normal.headerItems.find(x => x.id == 'love').hidden = true
        } else if (rating == -1) {
          menus.normal.headerItems.find(x => x.id == 'undo_dislike').hidden = false
          menus.normal.headerItems.find(x => x.id == 'dislike').hidden = true
        }
      } catch (err) {

      }

      if (this.contextExt) {
        if (this.contextExt.normal) {
          menus.normal.items = menus.normal.items.concat(this.contextExt.normal)
        }
        if (this.contextExt.multiple) {
          menus.multiple.items = menus.multiple.items.concat(this.contextExt.multiple)
        }
      }
    },
    async artistMenu(event) {
      console.debug(this.item)
      let self = this
      let followAction = "follow"
      let followActions = {
        follow: {
          icon: "./assets/star.svg",
          name: app.getLz('action.favorite'),
          action: () => {
            self.$root.setArtistFavorite(this.item.id, true)
          }
        },
        unfollow: {
          icon: "./assets/star.svg",
          name: app.getLz('action.removeFavorite'),
          action: () => {
            self.$root.setArtistFavorite(this.item.id, false)
          }
        }
      }
      if (self.app.cfg.home.followedArtists.includes(this.item.id)) {
        followAction = "unfollow"
      }
      app.showMenuPanel({
        items: [
          {
            icon: "./assets/feather/play.svg",
            name: app.getLz('action.startRadio'),
            action: () => {
              app.mk.setStationQueue({ artist: 'a-'+this.item.id }).then(() => {
                app.mk.play()
              })
            }
          },
          followActions[followAction],
          {
            icon: "./assets/feather/share.svg",
            name: app.getLz('term.share'),
            action: () => {
              self.app.copyToClipboard(this.item.attributes.url)
            }
          },
          {
            icon: "./assets/feather/external-link.svg",
            name: app.getLz('action.openArtworkInBrowser'),
            action: () => {
              window.open(app.getMediaItemArtwork(this.getArtworkUrl(), 1024, 1024))
            }
          }
        ]
      }, event)
    },
  },
  beforeDestroy: function () {
    // this.item = null;
    // this.kind = null;
    // this.size = null;
  }
});
</script>
